@using DotNetNuke.Web.DDRMenu;
@using System.Dynamic;
@inherits DotNetNuke.Web.Razor.DotNetNukeWebPage<dynamic>

<span class="hamburger material-icons" id="nav-mobile"><i class="fas fa-2x fa-bars"></i></span>

<nav class="nav-drill" id="nav-mobile">
    <ul class="nav-items">
        @RenderPages(Model.Source.root.Children)
    </ul>
</nav>

@helper RenderPages(IEnumerable<MenuNode> pages)
{
    if (!pages.Any())
    {
        return;
    }

    foreach (var page in pages)
    {
        var hasChildren = page.HasChildren();
        var pageDesc = Html.Raw(!string.IsNullOrEmpty(page.Description) ? ("<br/><span class=\"link-description\">" + @page.Description + "</span>") :string.Empty);
        var attrTarget = !string.IsNullOrEmpty(page.Target) ? ("target=\"" + page.Target + "\"") :string.Empty;

        <li class="nav-item @(hasChildren ? "nav-expand " : string.Empty)@(page.Selected ? "selected" : string.Empty)">
            @if (page.Enabled)
            {
                <a class="nav-link" href="@page.Url" @attrTarget>@page.Text @pageDesc</a>
            }
            else
            {
                <a href="javascript:void(0);" @attrTarget>@page.Text @pageDesc</a>
            }

            @if (hasChildren)
            {
                <a href="javascript:void(0);" class="nav-link nav-expand-link"><i class="fas fa-chevron-right"></i></a>
                <ul class="nav-items nav-expand-content">
                    <li class="nav-item">
                        <a class="nav-link nav-back-link" href="javascript:;">
                            <em class="fas fa-chevron-left me-1"></em>Back to @page.Text
                        </a>
                    </li>
                    @RenderPages(page.Children)
                </ul>
            }
        </li>
    }    
}
